<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>产品分析--项目列表</title>
    <!--layui样式-->
    <link rel="stylesheet" type="text/css" href="${re.contextPath}/plugin/layui/css/layui.css"/>
    <!--公用样式-->
    <link rel="stylesheet" type="text/css" href="${re.contextPath}/plugin/common/css/comment.css"/>
    <!--公用样式-->
    <link rel="stylesheet" type="text/css" href="${re.contextPath}/plugin/common/css/style.css"/>
    <!--扩展样式-->
    <link rel="stylesheet" type="text/css" href="${re.contextPath}/plugin/common/css/extended.css"/>
    <!--auto-complete 自动选择文本css-->
    <link rel="stylesheet" type="text/css" href="${re.contextPath}/plugin/layui/css/autocomplete.css"/>
    <!--Jquery-->
    <script type="text/javascript" src="${re.contextPath}/plugin/jquery/jquery-3.2.1.min.js"></script>
    <!--Jquery-->
    <script type="text/javascript" src="${re.contextPath}/plugin/jquery/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="${re.contextPath}/plugin/layui/layui.all.js" charset="utf-8"></script>

</head>
<style>
    .Right {
        width: 100%;
        overflow-y: scroll;
    }
    .widthle{
        width: 30%;
    }
    .widinput{
        width: 55%!important;
    }

</style>

<body>
<!--头部-->

<!--容器-->
<div class="container clearfix">
    <!--右侧内容-->
    <div class="Right fr mt10">
        <div class="screening screeningOne whitebg clearfix">
            <ul class="clearfix fl" style="width: 100%;">
                <li style="width: 30%;">
                    <label class="fl" style="width: 20%;" >角色名称:</label>
                    <input type="text"   style="border: 1px solid #DDDDDD;width: 30%;" name="remark" id="remark"  >
                </li>
                <li style="width: 60%;">
                        <button type="button" class="bluebg white" style="width: 120px;" onclick="query()">筛选</button>
                </li>
            </ul>
        </div>

        <div class="project whitebg">
            <div class="fl clearfix">
                <a href="#" class="fr white ft14 btn_del" onclick="add()">添加</a>
            </div>
            <div class=" project" style="margin-top: 0px;width: 100%;padding-left: 0px;">
            </div>
            <table id="tableList" class="layui-hide" lay-filter="tableList"></table>
        </div>
    </div>
</div>
<script type="text/javascript" src="${re.contextPath}/plugin/tools/tool.js"></script>
<script type="text/javascript" charset="utf-8" src="${re.contextPath}/plugin/common/js/tabs.js"></script>
<#-- 可以多选的下拉框 -->
<script src="${re.contextPath}/plugin/layui/xm-select.js"></script>

<script type="text/javascript" src="${re.contextPath}/plugin/tools/tool.js"></script>
<script type="text/html" id="toolBar">
        <a class="layui-btn layui-btn-xs  layui-btn-normal" lay-event="edit" style="margin-left: 0px;">编辑</a>
        <a class="layui-btn layui-btn-xs  layui-btn-normal" lay-event="delete" style="margin-left: 0px;">删除</a>
</script>


<!-- 公共配置第三方组件 -->
<script type="text/javascript">
    layui.config({
        version: false,
        debug: false,
        base: "${re.contextPath}/plugin/layui/lay/extra/"
    })

</script>
<script type="text/javascript">
    var layer;
    var form = layui.form;
    var  autocomplete;
    var table = null;
    var tableIns = null;
    var  _xstjlcpselect;
    //注意进度条依赖 element 模块，否则无法进行正常渲染和功能性操作
    var element = "";
    layui.use('element', function () {
        element = layui.element;


    });
    layui.use('laydate', function () {
        var laydate = layui.laydate;
        //执行一个laydate实例
        laydate.render({
            elem: '#beginDate' //指定元素
        });
        laydate.render({
            elem: '#endDate' //指定元素
        });
    });


    function query() {
        var remark = $('#remark').val();
        var jsondata = {
            remark:remark
        };
        table.reload('tableList', {where: jsondata});
    }


    layui.use(['table', 'layer', 'autocomplete'], function () {
        table = layui.table;
        element = element;
        //方法级渲染
        tableIns = table.render({
            id: 'tableList',
            elem: '#tableList',
            url: '/search/BigScreen/selectBigRoleList',
            height: "auto",
            page: true,
            cols: [[
                {
                    title: '序号', width: '10%', totalRowText: '合计', templet: function (res) {
                        return res.LAY_INDEX;
                    }
                },
                {
                    field: 'basePzId', title: '主键', width: '18%', hide:true
                },
                {
                    field: 'roleNo', title: '角色编号', width: '18%', sort: true
                },
                {
                    field: 'remark', title: '角色名称', width: '18%', sort: true
                },
                {field: 'oper', title: '操作', width: '27%', toolbar: "#toolBar"}
            ]],
            done: function (res, currentCount) {
                //***重点***：table渲染完成后渲染element进度条
                element.render();
                $(".layui-table-page select").css("width", "80px");

            }
        });
        //监听工具条
        table.on('tool(tableList)', function (obj) {
            var data = obj.data;
            var that = $(this);
            if (obj.event === 'edit') {
               var  basePzId= data.basePzId;
                edit(basePzId);
            }

            if (obj.event === 'delete') {
                var  basePzId= data.basePzId;
                del(basePzId);
            }
        });


    });
    function  del(basePzId) {
        if(confirm("是否确认要删除?")) {
            var json = {basePzId: basePzId};
            layerAjax('/search/BigScreen/deleteBigRole', json, '',
                function (d) {
                    if (d.flag == true) {
                        parent.layer.msg('操作成功', {icon: 1});
                        table.reload('tableList', {where: {}});
                    } else {
                        layer.msg(d.msg, {icon: 2});
                    }
                });

        }
    }

    function  edit(basePzId) {
        var title = "";
        var w = "";
        var h = "";
        if (w == null || w == '') {
            w = ($(window).width()-200);
        }
        ;
        if (h == null || h == '') {
            h = ($(window).height() - 50);
        }
        var url = "/search/BigScreen/editBigRole?basePzId="+basePzId;
        parent.layer.open({
            id: 'form-list',
            type: 2,
            area: [w + 'px', h + 'px'],
            fix: false,
            maxmin: true,
            shadeClose: false,
            shade: 0.4,
            title: title,
            content: url,
            success: function(layero){
                layero.find('.layui-layer-min').remove();
            },
            end:function () {
                table.reload('tableList', {where: {}});
            }
        });
    }

    function add() {
        var title = "";
        var w = "";
        var h = "";
        if (w == null || w == '') {
            w = ($(window).width()-200);
        }
        ;
        if (h == null || h == '') {
            h = ($(window).height() - 50);
        }
        var url = "/search/BigScreen/addBigRole"
        parent.layer.open({
            id: 'form-list',
            type: 2,
            area: [w + 'px', h + 'px'],
            fix: false,
            maxmin: true,
            shadeClose: false,
            shade: 0.4,
            title: title,
            content: url,
            success: function(layero){
                layero.find('.layui-layer-min').remove();
            },
            end:function () {
                table.reload('tableList', {where: {}});
            }
        });
    }




</script>
</body>

</html>